<template>
  <div class="map" id="map"></div>
</template>

<script>
import "ol/ol.css";
import OSM from "ol/source/OSM";
import Draw from "ol/interaction/Draw";
import Map from "ol/Map";
import View from "ol/View";
import { TileArcGISRest, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import Feature from "ol/Feature";
import { Point, LineString } from "ol/geom";
import { Fill, Stroke, Style, Text, Icon } from "ol/style";
import Overlay from "ol/Overlay";

import CONSTANT from "@/config/constant.js";
import startImg from "@/images/startPoint.png";
import endImg from "@/images/endPoint.png";

export default {
  name: "drawRoute",

  data() {
    return {
      map: null,
      curRow: null
    };
  },

  methods: {
    init() {
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new OSM()
          }),
          new TileLayer({
            source: new TileArcGISRest({
              url: CONSTANT.GIS_URL
            })
          })
        ],
        target: "map",
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });
      this.showRouterMap();
    },

    // 路径反显
    showRouterMap() {
      let pointsList = JSON.parse(JSON.parse(this.curRow.gis)); // 获取路径坐标集合
      let roadLine = new LineString(pointsList);
      let roadLineSource = new VectorSource({
        features: [new Feature(roadLine)]
      });
      const roadLineLayer = new VectorLayer({
        source: roadLineSource,
        style: new Style({
          stroke: new Stroke({
            color: "#38A0FF",
            width: 4
          })
        })
      });
      this.map.addLayer(roadLineLayer);

      // 绘制路径标签文字说明
      this.addVectorLabel({
        pointsList: pointsList[0],
        txt: "起"
      });
      this.addVectorLabel({
        pointsList: pointsList[pointsList.length - 1],
        txt: "终"
      });
      this.addVectorLabel({
        pointsList: [pointsList[0][0], pointsList[0][1]],
        txt: this.curRow.name + "，全程" + this.curRow.route_length + "公里",
        fill: "#111111",
        stroke: "#ffffff"
      });
    },

    addVectorLabel(opt) {
      let vectorSource = new VectorSource(); //矢量标注的数据源
      const layer = new VectorLayer({
        source: vectorSource
      }); //矢量标注图层
      this.map.addLayer(layer);
      if (opt.txt == "起" || opt.txt == "终") {
        let newFeature = new Feature({
          geometry: new Point(opt.pointsList || [])
        });
        newFeature.setStyle(
          new Style({
            image: new Icon({
              src: opt.txt == "起" ? startImg : endImg,
              offset: [0, -26],
              offsetOrigin: "bottom-right",
              size: [32, 60]
            }),
            fill: new Fill({ color: "#ffffff" }),
            zIndex: 1
          })
        );
        //   将新要素添加到数据源中
        vectorSource.addFeature(newFeature);
        return;
      }

      //使用overlayer来显示总路程
      let overlayerElement = document.createElement("div");
      overlayerElement.className = "ol-tooltip-draw-route";
      overlayerElement.innerHTML = opt.txt;
      const overlayObj = new Overlay({
        element: overlayerElement,
        offset: [0, -30],
        positioning: "bottom-center"
      });
      overlayObj.setPosition(opt.pointsList);
      this.map.addOverlay(overlayObj);
    }
  },

  mounted() {
    this.curRow = {
      gis:
        '"[[112.95597776205078,23.663277654777147],[112.97758649701983,23.671457318341225],[112.98344358236328,23.65388691621726],[112.98748192044705,23.673173932110757],[112.99485391953759,23.65620949443789],[112.99737819254197,23.67388031700054],[112.98820554677706,23.680767169060328],[112.9912492335939,23.685170946236795],[112.98990926193787,23.691258632994895],[112.98265162098099,23.704648371967955],[112.99416323250037,23.702123662187837],[112.98679209255491,23.698034258668663],[112.97770390926737,23.697075101772675],[112.90797899874089,23.726055377553425],[112.90409129655383,23.72080468623361],[112.90075935121787,23.731053727749245]]"',
      route_length: "27.46",
      update_time: "2020-08-17 17:08:10.183",
      account_id: 1,
      is_share: 0,
      name: "全部摄像机设备",
      count: 8,
      id: 22,
      share_account: ""
    };
    this.init();
  }
};
</script>
<style lang="less" scoped>
.map {
  height: 100%;
}
/deep/ .ol-tooltip-draw-route {
  padding: 3px 8px;
  background-color: #ffcc33c4;
  font-size: 12px;
  border-radius: 2px;
  color: black;
}
</style>